<template>
  <div class="hello">
    <button class="btn btn-primary" @click="exportExcelBtn">导出xlsx</button>
    <button v-if="!bgbsm" class="btn btn-primary" @click="save">保存</button>
    <div id="luckysheet" class="luckysheet-content"></div>
  </div>
</template>
 
<script>
//引入依赖包
import LuckyExcel from "luckyexcel";
const luckysheet = window.luckysheet;
//代码见下
import { exportExcel } from "@/unit/export";
export default {
  name: "HelloWorld",
  props: {
    sheetParams: {},
    bgbsm: {
      type: String,
    },
  },
  data() {
    return {
      xs: null,
      FormData: {},
      options: {
        container: "luckysheet", // 设定DOM容器的id
        title: "", // 设定表格名称
        lang: "zh", // 设定表格语言
        // 更多其他设置...
        showinfobar: false, //是否显示顶部信息栏
        showsheetbar: true, //是否显示自定义底部sheet页
        showsheetbarConfig: {
          add: false, //新增sheet
          created() {},
          menu: false, //sheet管理菜单
          sheet: true, //sheet页显示
        },
        showstatisticBar: false, //是否显示底部计数栏
        showstatisticBarConfig: {
          count: false, // 计数栏
          view: false, // 打印视图
          zoom: false, // 缩放
        },
        cellRightClickConfig: {
          chart: false, // 图表生成
          image: false, // 插入图片
          link: false, // 插入链接
        },
        showtoolbar: false,
      },
    };
  },
  mounted() {
    this.initLuckysheet();
  },
  methods: {
    initLuckysheet() {
      const { excelHeader = [], excelData = {} } = this.sheetParams;
      if (!(excelHeader.length && JSON.stringify(excelData) === "{}")) {
        this.options.hook = {
          workbookCreateAfter: () => {
            this.dataRendSheet(excelHeader, excelData);
          },
        };
      }
      luckysheet.create(this.options);
    },
    /**接口数据回显 */
    dataRendSheet(excelHeader, excelData) {
      //回显表格表头，第一行
      if (excelHeader.length > 0) {
        excelHeader.forEach((item1, index1) => {
          luckysheet.setCellValue(0, index1, item1);
          //普通回显数据
          if (JSON.stringify(excelData) != "{}") {
            excelData[item1].forEach((item2, index2) => {
              var row = index2 + 1;
              luckysheet.setCellValue(row, index1, item2);
            });
          }
        });
      }
    },
    // 导出
    exportExcelBtn() {
      // console.log(luckysheet.getluckysheetfile())
      exportExcel(luckysheet.getluckysheetfile(), "下载");
    },
    // 保存
    save() {
      let data = luckysheet.toJson();
      // console.log(JSON.stringify(data))
      console.log(data);
      // localStorage.setItem('excel2', JSON.stringify(data))

      // let url = GLOBAL_CONFIG.stxf + "/hzqd/save";
      // this.http.post(url, { json: JSON.stringify(data) }).then((res) => {
      //   if (res && res.data) {
      //     this.$message.success("保存成功");
      //     this.init();
      //     this.$emit("getlsTable");
      //   }
      // });
    },
  },
};
</script>
<style lang="css" scoped>
.luckysheet-content {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  height: 94%;
  left: 0px;
  top: 40px;
  bottom: 0px;
}
</style>